<template>
    <div class="cartcontrol">
        <transition name="move">
            <div class="cart-decrease" v-show="this.food.count>0" @click.stop.prevent="decreaseCart">
                <span class="inner icon-remove_circle_outline"></span>
            </div>
        </transition>
        <div class="cart-content" v-show="this.food.count>0">{{food.count}}</div>
        <div class="cart-add icon-add_circle" @click.stop.prevent="addCart"></div>
    </div>
</template>

<script type="text/ecmascript-6">
import Vue from 'vue';
export default {
    props: {
        food: {
            type: Object
        }
    },
    methods: {
        addCart (event) {
            if (!event._constructed) {
                return;
            }
            if (!this.food.count) {
                Vue.set(this.food, 'count', 1);
            } else {
                this.food.count++;
            }
            this.$emit('add', event.target);
        },
        decreaseCart (event) {
            if (!event._constructed) {
                return;
            }
            if (this.food.count > 0) {
                this.food.count--;
            }
        }
    }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
.cartcontrol
    font-size :0
    .cart-decrease
        display :inline-block
        padding :6px
        &.move-enter-to, &.move-leave
            opacity :1
            transform :translate3d(0,0,0)
            .inner
                transform :rotate(0)
        &.move-enter-active, &.move-leave-active
            transition: all 0.4s linear
        &.move-enter, &.move-leave-to
            opacity :0
            transform :translate3d(24px,0,0)
            .inner
                transform :rotate(180deg)
        .inner
            display :inline-block
            line-height :24px
            font-size :24px
            color :rgb(0, 160, 220)
            transition: all 0.4s linear
    .cart-content
        display :inline-block
        vertical-align :top
        padding-top :6px
        color :rgb(147,153,159)
        height :24px
        line-height :24px
        font-size :10px
    .cart-add
        display :inline-block
        padding :6px
        line-height :24px
        font-size :24px
        color :rgb(0, 160, 220)
</style>
